<template>
    <div class="article-page">
        <nav class="my-nav van-hairline--bottom">
            <a
                :class="active === 0 ? 'active' : ''"
                @click="changeMode(0)"
                href="javascript:;"
            >推荐</a
            >
            <a
                :class="active === 1 ? 'active' : ''"
                @click="changeMode(1)"
                href="javascript:;"
            >最新</a
            >
            <div class="logo"><img src="@/assets/logo.png" alt=""></div>
        </nav>
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <article-item :dataList="dataList"></article-item>
        </van-list>
    </div>
</template>

<script>
import { getArticle } from '@/api/article'

export default {
    name: 'article-page',
    data () {
        return {
            dataList: [],
            active: 0,
            current: 1,
            pageSize: 10,
            sorter: 'weight_desc',
            loading: false,
            finished: false
        }
    },
    methods: {
        async onLoad () {
            const res = await getArticle({
                current: this.current,
                pageSize: this.pageSize,
                sorter: this.sorter
            })

            this.dataList = this.dataList.concat(res.data.data.rows)
            this.current++
            this.loading = false
            if (this.current > res.data.data.pageTotal) this.finished = true
        },
        changeMode (i) {
            if (!(i === this.active)) {
                this.active = i
                i === 0 ? this.sorter = 'weight_desc' : this.sorter = ''
                this.current = 1
                this.dataList = []
                if (this.current === 1) this.onLoad()
                this.loading = true
            }
        }
    }
}
</script>

<style lang="less" scoped>
.article-page {
    margin-bottom: 50px;
    margin-top: 44px;

    .my-nav {
        height: 44px;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 999;
        background: #FFFFFF;
        display: flex;
        align-items: center;

        > a {
            color: #999999;
            font-size: 14px;
            line-height: 44px;
            margin-left: 20px;
            position: relative;
            transition: all 0.3s;

            &::after {
                content: '';
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 0;
                width: 0;
                height: 2px;
                background: #222222;
                transition: all 0.3s;
            }

            &.active {
                color: #222222;

                &::after {
                    width: 14px;
                }
            }
        }

        .logo {
            flex: 1;
            display: flex;
            justify-content: flex-end;

            > img {
                width: 64px;
                height: 28px;
                display: block;
                margin-right: 10px;
            }
        }
    }
}
</style>
